<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 视距,产生近大远小的效果 */
        body{perspective: 1000px;}
        /* 不设置高度,父类没高,子类脱标,旋转的样式不对 */
        div{width: 200px;height: 200px;border-radius: 50%;text-align: center;line-height: 200px;}
        /* transform-style:  默认flat,代表是2维的 backface-visibility 默认是可见的 背面看不到,子类显示出来  */
        .fu{position: relative;top: 0;left: 0; transition: all 3s;transform-style: preserve-3d;backface-visibility: hidden;}
        .fu:hover{transform: rotateY(180deg);}        
        .zheng{background-color: #f00;position: absolute;top: 0;left: 0;z-index: 1;}
        /* 定位2个页面还在同一个平面 transform: rotateY 使2个不再同一平面 */
        .bei{background-color: #0f0;position: absolute;top: 0;left: 0;transform: rotateY(180deg); }
    </style>
</head>
<body>
    <!-- div.fu>(div.zheng{正面}+div.bei{背面}) -->
    <div class="fu">
        <div class="zheng">正面</div>
        <div class="bei">背面</div>
    </div>
</body>
</html>